import type { App } from "vue";
import { useUserInfoStore } from "@/stores/userInfo";

const registerPermissionDirective = (app: App) => {
  app.directive("permission", (el, binding) => {
    /*
      el 绑定指令的DOM元素
      binding 对象，包含表达式和表达式的值
        binging.value

      使用：v-permission="btn.Trademark.add"
    */
    const userInfoStore = useUserInfoStore();

    if (!userInfoStore.buttons.includes(binding.value)) {
      // el.style.display = "none"; // 不够完美，用户可以手动操作DOM让其显示
      el.remove();
    }
  });
};

export default registerPermissionDirective;
